<template>
	<div class="myPage" style="">
		<div class="container" style="flex: 1;z-index: 2;background: #f3f3f3;">
			<fui-nav-bar fontWeight="bold" style="" background="white" color="#000" title="个人信息设置"
				@rightClick="rightClick">
				<div
					style="border: 1px solid #eeeeee;background: white;border-radius: 32rpx;padding: 6rpx;display: flex;flex-direction: row;width: 200rpx;justify-content: space-around;">
					<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="leftClick" color="black"
						name="arrowleft"></fui-icon>
					<div class="link-column" style=""></div>
					<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="gotoHome" color="black"
						name="home"></fui-icon>
				</div>
				<template v-slot:right>

				</template>
			</fui-nav-bar>

			<div @click="editNickNameShow"
				style="background-color: white;height: 96rpx;margin: 16rpx;border-radius: 16rpx;display: flex;flex-direction: row;align-items: center;"
				class="shadowback">
				<span style="margin-left: 32rpx;">修改昵称</span>
				<div class="space"></div>
				<span>{{getUserName()}}</span>
				<fui-icon style="margin-right: 16rpx;" size="48" name="arrowright"></fui-icon>
			</div>

			<div @click="editPasswordShow"
				style="background-color: white;height: 96rpx;margin: 16rpx;border-radius: 16rpx;display: flex;flex-direction: row;align-items: center;"
				class="shadowback">
				<span style="margin-left: 32rpx;">修改密码</span>
				<div class="space"></div>
				<fui-icon style="margin-right: 16rpx;" size="48" name="arrowright"></fui-icon>
			</div>
		</div>
	</div>

	<fui-dialog title='昵称修改' :show="showEditNickName"  maskClosable @click="onClick" @close="onClose">
		<fui-form-item label="昵称">
			<fui-input v-if="showEditNickName" v-model="editNickName" borderTop placeholder="请输入昵称"></fui-input>
		</fui-form-item>
	</fui-dialog>

    <fui-dialog title='密码修改' :show="showEditPassword"  maskClosable @click="onPassWordClick" @close="onClose">
    	<fui-form-item label="密码">
    		<fui-input  v-if="showEditPassword" v-model="editNickName" borderTop placeholder="请输入密码"></fui-input>
    	</fui-form-item>
		
		<fui-form-item label="确认密码">
			<fui-input  v-if="showEditPassword" v-model="editNickName" borderTop placeholder="请输入确认密码"></fui-input>
		</fui-form-item>
    </fui-dialog>    
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '场地一', '场地二'],
				items: [{
					text: 'First UI',
					src: '/static/images/common/logo.png'
				}, ],
				show: false,
				loginInfo: null,
				showEditNickName: false,
				editNickName:'',
				showEditPassword:false,
				
			}
		},
		onLoad() {
			console.log("onLoad");
		},
		methods: {
			leftClick() {
				uni.navigateBack();
			},
			gotoHome() {
				getApp().gotoHome();
			},
			editNickNameShow(){
				this.editNickName = this.loginInfo.nickname;
				this.showEditNickName = true;
			},
			editPasswordShow(){
				this.showEditPassword = true;
			},
			getUserName() {
				let loginInfo = uni.getStorageSync('loginInfo');
				if (loginInfo != null && loginInfo != '') {
					this.loginInfo = JSON.parse(loginInfo);
				}
				console.log(JSON.stringify(this.loginInfo));
				return this.loginInfo.nickname;
			},
			onClick(e){
				console.log(e);
				if(e.index == 0){
					this.showEditNickName = false;
					this.editNickName = '';
				}
				if(e.index == 1){
					
				}
			},
			onPassWordClick(e){
				console.log(e);
				if(e.index == 0){
					this.showEditPassword = false;
				}
				if(e.index == 1){
					
				}
			},
			onClose(e){
				console.log('onClose');
				this.showEditNickName = false;
				this.editNickName = '';
				this.showEditPassword = false;
			}
		}
	}
</script>

<style scoped>
</style>